/*
 * @Title: 首页Banner
 * @Created by: ycq 
 */
<template>
	<view class="banner">
		<!-- 视频 -->
		<!-- <view v-if="isShowVideo">
		<video class="banVideo" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"
		enable-progress-gesture="false"
		objectFit="cover"></video>
		</view> -->
		<!-- 图片 -->
			<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
			<view class="dot-main" style="top: 45vw;">
				<view :class="['dot-item',current==index?'active':'']" v-for="(item,index) in bannerData" :key="index"></view>
			</view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
			<view class="dot-main">
				<view :class="['dot-item',current==index?'active':'']" v-for="(item,index) in bannerData" :key="index"></view>
			</view>
			<!-- #endif -->
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" circular='true' :interval="3000" :duration="typeDuration" @change="change">
			    <swiper-item v-for="(item,index) in bannerData" :key='index'>
			        <view class="swiper-item" >
						<img :src='item.img' alt="">
			        </view>
			    </swiper-item>
			</swiper>
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				bannerData:[
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
				],
				current: 0,
				typeDuration:1000,
				isShowVideo:true,
				}
		},
		methods: {
			change(e) {
				// console.log(e.detail.source);
				if(e.detail.source == 'touch'){
					this.typeDuration = 300
				}else{
					this.typeDuration = 1000
				}
				this.current = e.detail.current;
			}
		}
	}
</script>

<style scoped>
	.banner{
		width: 100%;
		height: 420upx;
	}
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.swiper-item img{
		width: 100%;
		height: 100%;
	}
	.dot-main {
		width: 100vw;
		height: 5vw;
		top:48vw;
		
		display: flex;
		position: absolute;
		z-index: 9;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 12upx;
		height: 12upx;
		border-radius: 50%;
		background: rgba(0,0,0,0.3);
		margin: 0 1%;
		box-sizing: border-box;
	}
	.active {
		background: #ffffff;
	}
	.banVideo{
		width:100%;
	}
</style>

